<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		html,
		body {
			width: 100%;
			height: 100%;
		}
	</style>
	<body>
	</body>
	<script>
		/**
		 * 宏任务与GUI渲染的执行时机
		 * script宏任务执行过程中，会遇到setTimeout宏任务会将它放入到宏任务的队列中去
		 * 当script宏任务执行完毕后，进行GUI渲染此时背景色为红色，
		 * 当GUI渲染完成后，从宏任务队列中取出一个setTimeout宏任务执行，
		 * 执行完毕后，进行GUI渲染，此时的背景色变为蓝色。
		 **/
		document.body.style.background = "red";
		console.log(1);
		setTimeout(() => {
			console.log(3);
			document.body.style.background = "blue";
		}, 100)
		console.log(2)
	</script>
</html>
